.more-icon {
	width: 10rpx;
	height: 10rpx;
	background-color: #232323;
}
.works-box {
	min-height: 100vh;
	line-height: 1;
	padding-bottom: 100rpx;
	background-color: #fff;

	:deep .nav-bar {
		background-color: transparent;
		box-shadow: none;
		color: #fff;

		.arrow-left {
			border-color: #fff;
		}

		.more-icon {
			background-color: #fff;
			&::before,
			&::after {
				background-color: #fff;
			}
		}
	}

	:deep .nav-bar__2 {
		background-color: #fff;
		box-shadow: 0 4px 4px #f4f4f4;
		color: #333;

		.arrow-left {
			border-color: #232323;
		}

		.more-icon {
			background-color: #232323;

			&::before,
			&::after {
				background-color: #232323;
			}
		}
	}

	.user-info-box {
		position: relative;
		width: 100%;
		height: 600rpx;
		transition: all 0.3s;
		.user-bg_img {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.user-info-wrap {
			position: absolute;
			display: flex;
			align-items: center;
			right: 32rpx;
			bottom: -32rpx;

			.user-info__name {
				font-weight: 600;
				font-size: calc(var(--amplified_base) * 36rpx);
				color: #ffffff;
				line-height: calc(var(--amplified_base) * 47rpx);
				margin-right: 20rpx;
			}

			.user-info__avatar {
				width: calc(var(--amplified_base) * 120rpx);
				height: calc(var(--amplified_base) * 120rpx);
				border-radius: 60rpx;
				margin-left: 24rpx;
				flex-shrink: 0;
				box-shadow: 0 0 6rpx #f4f4f4;
			}
		}
	}

	//有人提醒你去查看
	.remind-list {
		margin: 112rpx 0 72rpx;

		.remind-list-item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: calc(var(--amplified_base) * 32rpx);
			line-height: 38rpx;
			margin-top: 16rpx;

			.remind-list-item_name {
				color: #526a9b;
			}

			.remind-list-item_text {
				color: #090909;
				margin-left: 16rpx;
			}
		}
	}

	//作品列表
	.works-list {
		background-color: #f4f4f4;

		.works-item {
			padding: 40rpx 32rpx;
			margin-top: 8rpx;
			background-color: #fff;
		}

		// 用户信息
		.works-users {
			display: flex;
			flex-direction: row;
			align-items: center;

			// 用户头像
			.works-users-avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 58rpx;
				flex-shrink: 0;
			}

			// 用户名字和时间
			.works-users-name_time {
				flex: 1;
				margin: 0 calc(var(--amplified_base) * 16rpx);

				.works-users-name {
					font-weight: 600;
					font-size: calc(var(--amplified_base) * 32rpx);
					color: #526a9b;
					line-height: calc(var(--amplified_base) * 38rpx);
				}

				.works-users-time {
					font-weight: 400;
					font-size: calc(var(--amplified_base) * 24rpx);
					color: #a1a1a1;
					line-height: calc(var(--amplified_base) * 28rpx);
					margin-top: 10rpx;
				}
			}

			//更多

			.works-users-more {
				height: 2em;
				min-width: 2em;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.more-icon {
				flex-shrink: 0;
				background-color: #666666;

				&::before {
					left: -10rpx;
				}
				&::after {
					right: -10rpx;
				}
			}
		}

		//作品的文字信息
		.works-content {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: calc(var(--amplified_base) * 32rpx);
			color: #0c0c0c;
			line-height: calc(var(--amplified_base) * 38rpx);
			word-break: break-all;
		}

		// 作品的图片信息
		.works-imgs {
			margin-top: 16rpx;
			display: grid;
			gap: 16rpx; // 图片之间的间距
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(
				auto-fill,
				minmax(100px, auto)
			); /* 或设置固定高度 */

			.works-imgs-item {
				pointer-events: none;
				width: 223rpx;
				height: 223rpx;
				border-radius: 8rpx;
			}
		}

		// 地址 / 是否点赞
		.works-content-toolbar-container {
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.works-content-toolbar-address {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: calc(var(--amplified_base) * 24rpx);
				color: #a1a1a1;
				line-height: calc(var(--amplified_base) * 28rpx);

				.works-content-toolbar-address-icon {
					width: calc(var(--amplified_base) * 32rpx);
					height: calc(var(--amplified_base) * 32rpx);
				}
			}

			.works-content-toolbar-tool {
				display: flex;
			}

			.works-content-toolbar-tool-item {
				width: calc(var(--amplified_base) * 48rpx);
				height: calc(var(--amplified_base) * 48rpx);
				margin-left: 32rpx;
			}
		}
	}

	// 已点赞列表
	.works-star-list {
		background: #f7f7f7;
		border-radius: 8rpx;
		padding: 20rpx 16rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-weight: 600;
		font-size: calc(var(--amplified_base) * 28rpx);
		color: #526a9b;
		line-height: calc(var(--amplified_base) * 33rpx);

		.works-star-list-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
	}

	//评论
	.works-comments {
		line-height: calc(var(--amplified_base) * 33rpx);

		.works-comments-item {
			margin-top: 16rpx;
		}

		.works-comments_name {
			font-weight: 600;
			font-size: calc(var(--amplified_base) * 28rpx);
			color: #111111;
			margin-right: 8rpx;
			float: left;

			display: flex;
			align-items: center;
		}

		.works-comments_reply-wrap {
			display: flex;
			align-items: center;
			font-weight: 100;
			margin: 0 10rpx;
			color: #464646;
		}

		.works-comments_content {
			font-weight: 400;
			font-size: calc(var(--amplified_base) * 28rpx);
			color: #111;
			word-wrap: break-word;
			word-break: break-word;
		}
		.works-comments_reply-name {
			color: #5a75ab;
		}
	}

	//评论框
	:deep .comment-popup {
		background-color: #f8f8f8;
		padding: 32rpx 24rpx;
		display: flex;
		align-items: center;
		line-height: 1.5;

		.comment-textarea {
			flex: 1;
			min-height: 1.3em;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			background-color: #ececef;
		}

		.uni-textarea-placeholder {
			line-height: 1.3;
		}

		.send-comment {
			flex-shrink: 0;
			margin-left: 16rpx;
			border-radius: 8rpx;
			padding: 10rpx 20rpx;
			letter-spacing: 4rpx;
			background-color: #1677ff;
			color: #fff;
		}
	}

	//右上角的更多 在下方出现的弹出层
	:deep .more-popup-1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 40rpx 0;

		.popup-more-item {
			width: 100%;
			padding: 42rpx 0;
			text-align: center;
			color: #0d0d0d;
		}
	}

	//右上角的更多 在下方出现的弹出层
	:deep .more-popup-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 40rpx 0;

		.popup-more-item {
			width: 100%;
			padding: 42rpx 0;
			display: flex;
			align-items: center;
			color: #0d0d0d;
		}

		.more-popup--icon {
			margin: 0 24rpx 0 0;
			width: 48rpx;
			height: 48rpx;
		}
	}
}
